<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>综合案例</title>
</head>
<body>
<h1>axios和json综合</h1>
<input type="button" value="请求和响应都是普通字符串" onclick="method01()"> <br>
<input type="button" value="响应数据改成json字符串" onclick="method02()"> <br>
<input type="button" value="请求数据也改成json字符串" onclick="method03()"> <br>
<hr>
<h3>用户列表</h3>
<div id="messageDiv"></div>
<table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
    <tr>
        <th>username</th>
        <th>password</th>
    </tr>
</table>
</body>
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    function method01() {
        let url = "/test01Servlet"
        let param = "username=zhangsan&password=123";
        axios.post(url, param).then(response => {
            console.log(response.data);
        });
    }

    function method02() {
        // axios.get(url+"?"+param)
        let url = "/test02Servlet"
        let params = "username=liuyan&password=1234";
        //console.log(resp.data);
        axios.post(url, params).then(resp => {
            //2.4 定义变量接收后端响应额json数组
            let arr = resp.data;
            //2.5定义变量保存从数组中取出的每行数据
            let content = "";
            //2.6遍历数组arr
            for (let u of arr) {
                //2.7取出的内容拼接到变量content
                content += `<tr>
                                  <td>${u.username}</td>
                                  <td>${u.password}</td>
                               </tr>`;
            }
            //2.8将content内容放到table标签中
            document.getElementById("myTable").innerHTML += content;
        });
    }

    function method03(){
        //2.1准备url
        let url="/test03Servlet";
        //2.2准备请求参数
        let params={"username":"迪丽热巴","password":"1234"};
        //2.3发送异步请求
        axios.post(url,params)
            .then(resp=>{
                //console.log(resp.data);
                //2.4 定义变量接收后端响应额json数组
                let obj = resp.data;
                //console.log(obj);
                //判断
                if(obj.flag){
                    //查询成功 <div id="messageDiv"></div>
                    document.getElementById("messageDiv").innerHTML=obj.message;
                    //将响应数据放到table标签中
                    let arr = obj.valueData;//[{},{},{}]
                    //2.5定义变量保存从数组中取出的每行数据
                    let content="";
                    //2.6遍历数组arr
                    for(let u of arr){
                        //2.7取出的内容拼接到变量content
                        content+=`<tr>
                                                <td>${u.username}</td>
                                                <td>${u.password}</td>
                                            </tr>`;
                    }
                    //2.8将content内容放到table标签中
                    document.getElementById("myTable").innerHTML += content;
                }else{
                    //查询成功 <div id="messageDiv"></div>
                    document.getElementById("messageDiv").innerHTML=obj.message;
                }
            });
    }

</script>
</html>